<template>
  <!-- custom-navbar -->
  <!-- 导航栏 -->
  <uni-nav-bar fixed statusBar leftWidth="100rpx" rightWidth="120rpx">
    <template #default>
      <view class="title">
        <text class="title-offline" v-if="userStore.actionType === 'offline'">(离线)</text>
        <wd-icon v-else-if="isConnected" name="wifi" size="42rpx" color="#06C662"></wd-icon>
        <wd-icon v-else name="wifi-error" size="36rpx" color="#fa4350"></wd-icon>
        {{ `${userStore.userInfo?.name || ''}(${userStore.userInfo?.env_company || ''})` }}
      </view>
    </template>
    <template #left>
      <view class="logout" @click="onShowLogoutAction">
        <wd-icon name="logout" size="40rpx" color="#ED1C24"></wd-icon>
      </view>
    </template>
    <template #right>
      <view class="right">
        <slot name="right"></slot>
      </view>
    </template>
  </uni-nav-bar>
  <!-- 退出对话框 -->
  <view class="dialog">
    <wd-message-box selector="logout-dialog" />
    <wd-action-sheet
      v-model="logoutActionShow"
      :actions="logoutActions"
      @select="onLogout"
      cancel-text="取消"
    />
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { isNetWork } from '@/utils/system'
import { useOrderStore, useDeviceStore, useUserStore, useWorkStore } from '@/stores/'
const orderStore = useOrderStore()
const deviceStore = useDeviceStore()
const userStore = useUserStore()
const workStore = useWorkStore()
import { useMessage } from 'wot-design-uni'
const logoutDialog = useMessage('logout-dialog')
// 动作面板
const logoutActionShow = ref(false)
const logoutActions = ref([
  {
    name: '仅退出',
    // subname: '返回到登录',
  },
  {
    name: '退出并清空',
    color: '#fa4350',
    // subname: '退出登录并清空数据',
  },
])
function onShowLogoutAction() {
  logoutActionShow.value = true
}
// 动作面板选择
function onLogout({ index }) {
  switch (index) {
    case 0:
      uni.navigateTo({
        url: '/pages/login/login',
      })
      break
    case 1:
      logout()
      break
  }
}

// 退出登录
function logout() {
  logoutDialog
    .confirm({
      title: '提示',
      msg: '确定要退出登录吗？',
      confirmButtonProps: { type: 'error' },
    })
    .then(() => {
      // #ifndef WEB
      uni.closeBluetoothAdapter()
      // #endif
      userStore.clear()
      orderStore.clear([])
      deviceStore.clear()
      workStore.clear([])
      uni.reLaunch({ url: '/pages/login/login' })
    })
    .catch((error) => {
      console.log(error)
    })
  // uni.showModal({
  //   title: '提示',
  //   content: '确定要退出登录吗？',
  //   success: function (res) {
  //     if (res.confirm) {
  //       console.log('用户点击确定')
  //     } else if (res.cancel) {
  //       console.log('用户点击取消')
  //     }
  //   },
  // })
}
// 网络状态
const isConnected = ref(false)

onMounted(async () => {
  isConnected.value = await isNetWork()
  uni.onNetworkStatusChange((res) => {
    isConnected.value = res.isConnected
  })
})
</script>

<style lang="scss" scoped>
.title {
  @include flex-box-set(center);
  width: 100%;
  font-size: initial;
  &-offline {
    color: $my-color-green;
    font-size: $my-text-font-size-sm;
  }
}
.right {
  font-size: initial;
}
</style>
